import router from './router'
import store from './store'
// 添加进度条效果，优化体验
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

// import { asyncRoutes } from './router'
// 设置路由守卫的白名单
const whileList = ['/login', '/404']

router.beforeEach((to, from, next) => {
  NProgress.start()

  // 只要发生页面跳转都走beforeEach
  // to：去哪个页面
  // from：从哪个页面来
  // next：正常跳转

  // 从vuex中获取token
  const token = store.getters.token
  // 设置路由守卫规则
  if (token) {
    // 有token的情况
    if (to.path === '/login') {
      // token存在引导跳转到首页
      next('/')
      NProgress.done()
    } else {
      // 获取用户信息
      // 正常放行，正常访问首页等内部里面，需要获取用户信息
      // 如果当前vuex中已经有用户资料，就不需要再获取了
      if (Object.keys(store.state.user.userInfo).length <= 0) {
        store.dispatch('user/getUserInfo').then(async(res) => {
          // 1.这里可以拿到用户的权限
          // 2.拿到权限之后 可以动态新增路由
          // addRoutes 可以在router对象上新增路由
          // this.$router.options.routes 只能创建VueRouter实例的时候传过去的路由
          // 动态添加路由的this.$router.option.routes是取不到的
          // addRoutes是一个异步的 不会阻碍后面的代码的执行
          // menu里存的是用户对应的页面权限
          const { roles: { menus }} = res
          // console.log('有权限的路由', menus)
          // console.log('全部路由', asyncRoutes)
          const otherRoutes = await store.dispatch('permission/filterRoutes', menus)
          // 必须把筛选后的动态路由，添加到router的路由表中
          router.addRoutes([
            ...otherRoutes,
            { path: '*', redirect: '/404', hidden: true }
          ])
          // 为了让用户看到对应的导航，就让用户重新再进一次
          next({
            ...to,
            replace: true
          })
        })
      } else {
        next() // 放行
        NProgress.done()
      }
    }
  } else {
    // 没有token的情况
    if (whileList.includes(to.path)) {
      next()
      NProgress.done()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

router.afterEach((to, from) => {
  NProgress.done()
})
